import type {PropsWithChildren, ReactElement} from 'react';
import {ImageBackground, StyleSheet, View} from 'react-native';
import Animated, {
    interpolate,
    useAnimatedRef,
    useAnimatedStyle,
    useScrollViewOffset,
} from 'react-native-reanimated';

import {ThemedView} from '@/components/ThemedView';
import {useBottomTabOverflow} from '@/components/ui/TabBarBackground';
import {useColorScheme} from '@/hooks/useColorScheme';
import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useHeaderHeight} from "@react-navigation/elements";
import {useState} from "react";
import {Provider} from "@ant-design/react-native";

const HEADER_HEIGHT = 250;

type Props = PropsWithChildren<{
    // headerImage: ReactElement;
    // headerBackgroundColor: { dark: string; light: string };
    pageTab?: ReactElement
    pageHeader?: ReactElement
    pageBottom?: ReactElement
    pageModal?: ReactElement
    getPageScrollBodyInfo?: () => ({height}: { height: any }) => void
    getPageTabInfo?: () => ({height}: { height: any }) => void
}>;


export default function PageScrollView({
                                           children,
                                           isTransparentTab = false,
                                           pageTab,
                                           pageHeader,
                                           pageBottom,
                                           pageModal,
                                           // headerImage,
                                           // headerBackgroundColor,
                                           getPageScrollBodyInfo,
                                           getPageTabInfo,
                                           bodyStyle,
                                           tabStyle,
                                           viewType,
                                           themedStyle
                                       }: Props) {
    const colorScheme = useColorScheme() ?? 'light';
    const scrollRef = useAnimatedRef<Animated.ScrollView>();
    const scrollOffset = useScrollViewOffset(scrollRef);
    const bottom = useBottomTabOverflow();
    const {top: safeTop} = useSafeAreaInsets()
    const headerHeight = useHeaderHeight();
    const [tabH, setTabHeight] = useState(0)
    const [contentBodyH, setContentBodyHeight] = useState(0)

    // const headerAnimatedStyle = useAnimatedStyle(() => {
    //   return {
    //     transform: [
    //       {
    //         translateY: interpolate(
    //           scrollOffset.value,
    //           [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
    //           [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
    //         ),
    //       },
    //       {
    //         scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
    //       },
    //     ],
    //   };
    // });

    const getTabInfo = (event) => {
        const {height} = event.nativeEvent.layout;
        setTabHeight(height)
        getPageTabInfo && getPageTabInfo(event.nativeEvent.layout)
    }
    const getContentBodyInfo = (event) => {
        const {height} = event.nativeEvent.layout;
        setContentBodyHeight(height)
        getPageScrollBodyInfo && getPageScrollBodyInfo(event.nativeEvent.layout)
    }

    return (
        <Provider>
            <ThemedView style={[styles.container, themedStyle]}>
                <ImageBackground
                    source={require('@/assets/images/public/page_bg1.png')}
                    style={styles.content_wrap}
                    resizeMode='stretch'
                >
                    {pageTab &&
                        <ThemedView
                            style={[styles.tab, {
                                height: (headerHeight - safeTop) || tabH,
                                paddingTop: safeTop
                            }, tabStyle]}>
                            <ThemedView onLayout={getTabInfo}>{pageTab}</ThemedView>
                        </ThemedView>
                    }
                    {(pageHeader || isTransparentTab) &&
                        <ThemedView style={[styles.header, {paddingTop: headerHeight}]}>
                            {pageHeader}
                        </ThemedView>
                    }

                    <Animated.ScrollView
                        ref={scrollRef}
                        onLayout={getContentBodyInfo}
                        scrollEventThrottle={16}
                        scrollIndicatorInsets={{bottom}}
                        contentContainerStyle={{paddingBottom: bottom}}>
                        {/*<Animated.View*/}
                        {/*    style={[*/}
                        {/*      styles.header,*/}
                        {/*      // { backgroundColor: headerBackgroundColor[colorScheme] },*/}
                        {/*      headerAnimatedStyle,*/}
                        {/*    ]}>*/}
                        {/*  {headerImage}*/}
                        {/*</Animated.View>*/}
                        {viewType === 'card' &&
                                <ThemedView
                                    style={[ {paddingTop: (pageHeader || isTransparentTab) ? 0 : safeTop}, bodyStyle,{height: contentBodyH-15},styles.cardStyle]}>
                                    <Animated.ScrollView>
                                        {children}
                                    </Animated.ScrollView>
                                </ThemedView>
                        }
                        {
                            viewType !== 'card' &&
                            <ThemedView
                                style={[styles.content, {paddingTop: (pageHeader || isTransparentTab)? 0 : safeTop},bodyStyle]}>{children}</ThemedView>
                        }
                    </Animated.ScrollView>

                    {pageBottom && <ThemedView>{pageBottom}</ThemedView>}
                </ImageBackground>
                {pageModal && <>{pageModal}</>}
            </ThemedView>
        </Provider>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column",
        position: 'relative',
        backgroundColor: '#F1F2F4',
    },
    content_wrap: {
        flex: 1,
        width: '100%',
        height: '100%',
        overflow: 'hidden',
    },
    header: {
        // height: HEADER_HEIGHT,
        // overflow: 'hidden',
    },
    content: {
        flex: 1,
        padding: 16,
        // gap: 16,
        overflow: 'hidden',
    },
    tab: {},
    cardStyle:{
        backgroundColor: 'white',
        borderRadius: 8,
        marginHorizontal: 16,
        overflow: 'hidden',
    }
});
